<template>
    <Card>
        <div class="ivu-mb-16">
            <Row type="flex" class="chat">
                <Col>
                <Select   placeholder="请选择公众号" v-model="params.wechatId" @on-change="changeWechat" clearable class="cur" v-width="280">
                    <Option v-for="item in wechatList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                </Col>
                <Col>
                <Button type="primary" @click="formSave(formInline,1)">保存为草稿</Button>
                <Button class="ivu-ml-8" @click="formSave(formInline,2)">发布</Button>
                <Button class="ivu-ml-8">群发</Button>
                </Col>
            </Row>
        </div>
        <div>
            <Row :gutter="16" >
                <Col span="4">
                <div class="listcard">
                    <div class="listcout">
                        <div class="listfont">图文列表</div>
                        <template v-for="(item,index) in dataList"  >
                            <div :key="index" :class="{'activeCss':activeVar==index}"  @click="activeFun(item,index)">
                                <div class="listbox" v-if="index===0">
                                    <div class="appmsg"></div>
                                    <div class="ivu-mb-8">导入文章</div>
                                </div>
                                <div v-else class="card_container"  @mouseenter.stop="appmsgenter(item,index)" @mouseleave="appmsgleave(item,index)">
                                    <div class="card_appmsg_thumb"></div>
                                    <div class="card_appmsg_modal" v-show="item.show">
                                        <Row style="justify-content:space-between">
                                            <Col>
                                            <Icon type="md-arrow-up"  @click.stop="upData(index)"/>
                                            <Icon class="ivu-ml-16" type="md-arrow-down"  @click.stop="downData(index)"  v-if="index !== dataList.length - 1"/>
                                            </Col>
                                            <Col>
                                            <span>导入文章</span>
                                            <Icon class="ivu-ml-16" type="ios-trash" />
                                            </Col>
                                        </Row>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <div class="listadd" @click="handleAdd">
                            <Icon type="md-add" />
                        </div>
                    </div>
                </div>
                </Col>
                <Col span="20">
                    <div style="padding-left:10%">
                        <Form ref="formInline" :model="formData" :rules="ruleValidate" >
                            <FormItem  prop="title">
                                <Input v-model="formData.title" maxlength="64" show-word-limit placeholder="请在这里输入标题" style="width: 500px" />
                            </FormItem>
                            <FormItem  prop="author">
                                <Input v-model="formData.author" maxlength="8" show-word-limit placeholder="请输入作者" style="width: 200px" />
                            </FormItem>
                            <FormItem>
                                <div v-width="700">
                                    <div class="home">
                                        <tinymce
                                        id="myedit"
                                        ref="editor"
                                        v-model="formData.content"
                                        @onClick="onClick"
                                        />
                                    </div>
                                    <!-- <vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01" ></vue-ueditor-wrap> -->
                                </div>
                            </FormItem>
                            <FormItem>
                                <div>封面和摘要</div>
                                <Row :gutter="16">
                                    <Col span="4">
                                        <Upload
                                            type="drag"
                                            action="//jsonplaceholder.typicode.com/posts/">
                                            <div style="padding: 20px 0;line-height: 16px;height: 92px;">
                                                <Icon type="md-add" size="20" />
                                                <!-- <Icon type="ios-cloud-upload" size="20" style="color: #3399ff"></Icon> -->
                                                <div>拖拽或选择封面</div>
                                            </div>
                                        </Upload>
                                    </Col>
                                    <Col span="20">
                                        <Input v-model="formData.digest" :autosize="{ minRows: 4, maxRows: 8 }" maxlength="120" show-word-limit type="textarea" placeholder="选填，摘要会在订阅号消息、转发链接等文章外的场景显露，帮助堵着快速了解内容，如不填则默认抓取正文前54字" style="width: 500px" />
                                    </Col>
                                </Row>
                            </FormItem>
                            <FormItem  label="是否打开评论：" prop="need_open_comment">
                                <RadioGroup v-model="formData.need_open_comment">
                                    <Radio :label="0">不打开</Radio>
                                    <Radio :label="1">打开</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem  label="是否粉丝才可评论" prop="only_fans_can_comment">
                                <RadioGroup v-model="formData.only_fans_can_comment">
                                    <Radio :label="0">所有人可评论</Radio>
                                    <Radio :label="1">粉丝才可评论</Radio>
                                </RadioGroup>
                            </FormItem>
                        </Form>
                    </div>
                </Col>
            </Row>
        </div>
    </Card>
</template>
<script>
    import { wechatselectConfig,wechatadddraftArticle,wechatupdatedraftArticle,wechatdeldraftArticle } from '@api/public'
    // import VueUeditorWrap from 'vue-ueditor-wrap';
    import tinymce from '@/components/tinymce'
    export default {
        components: { tinymce },
        data () {
            return {
                formInline:'formInline',
                params: { wechatId: '' },
                wechatList: [],
                index: 1,
                activeVar: 0,
                enterIndex: null, // 目标下表
                dataList: [{
                    index: 0,
                    show: false,
                }],
                formData:{
                    title:'',
                    author:'',
                    content:'',
                    digest:'',
                    thumb_media_id:'',//封面
                    need_open_comment:0,
                    only_fans_can_comment:0,
                },
                ruleValidate:{
                    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                    author:[{ required: true, message: '请输入作者', trigger: 'blur' }]
                },
                msg:'Hello World!'
            }
        },
        created() {
            // this.editorConfig = {
            // UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径
            // initialFrameHeight:200
            // // serverUrl: '//ueditor.zhenghaochuan.com/cos', // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
            // };
        },
        mounted () {
            this.getwechat()
        },
        methods: {
             // 内容
             getContent () {
                console.log('内容', this.msg)
            },
            // 鼠标单击的事件
            onClick (e, editor) {
                console.log('Element clicked')
                console.log(e)
                console.log(editor)
            },
            getwechat () {
                wechatselectConfig().then(res => {
                    this.wechatList = res
                })
            },
            changeWechat () {
                //
            },
            appmsgenter (item, index) {
                item.show = true
            },
            appmsgleave (item) {
                item.show = false
            },
            handleAdd () {
                this.index++
                this.dataList.push({
                    index: 0,
                    show: false,
                })
            },
            activeFun (item, index) {
                console.log(item,'item',index,'index')
                // item.title=this.formData.title
                this.activeVar = index
                this.dataList[index].title=this.formData.title
            },
            //上移
            upData(index) {
                let newArr =this.swapItems(this.dataList, index, index - 1)
                this.dataList = newArr
                this.activeVar = index-1
            },
            swapItems(arr, index1, index2) {
                arr[index1] = arr.splice(index2, 1, arr[index1])[0];
                return arr;
            },
            //下移
            downData(index){
                let newArr =this.swapItems(this.dataList, index, index + 1)
                this.dataList = newArr
                this.activeVar = index+1
            },
            formSave(name,num){
                const articleArray=[]
                    articleArray.push(this.formData)
                    console.log(articleArray,'articleArray')
                if(num==1){
                    this.$refs[name].validate((valid) => {
                    if (valid) {
                        wechatadddraftArticle(articleArray).then(res=>{
                            this.$Message.success('Success!');
                        }) 
                    }
                    })
                }else if(num==2){
                    this.$refs[name].validate((valid) => {
                    if (valid) {
                        wechatadddraftArticle(articleArray).then(res=>{
                            this.$Message.success('Success!');
                        }) 
                    }
                    })
                }
                
            }
        }
    }
</script>
<style>
.chat{
    justify-content: space-between;
}
.cur{
    width: 400px;
    position: relative;
}
.cur .ivu-select-selected-value{
    padding-left: 100px !important;
}
.cur .ivu-select-selected-value::before{
    content: '当前公众号:';
    position: absolute;
    z-index: 9;
    top:0;
    left: 10px;
}
/* .listcard{
    background:#282a2b;
} */
.listcout{
    padding: 15px;
}
.listfont{
    padding: 15px 0;
}
.listbox{
    padding: 10px 10px 0 10px;
}
.appmsg{
    height: 100px;
}
.listadd{
    font-size: 40px;
    text-align: center;
}
.card_container{
    height: 100px;
    position: relative;
    margin-top: 2px;

}
.card_appmsg_thumb{
    position: absolute;
    right: 10px;
    top:28px;
    width: 60px;
    height: 60px;
}
.activeCss{
    border: 1px solid #2d8cf0;
}
.card_appmsg_modal{
    position: absolute;
    bottom: 0;
    padding: 8px;
    width: 100%;
    opacity: 0.6;
}
</style>
